<template>
  <pageTabelLayout>
    <template #pageTabel>
      <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                         @grid-ready="gridReady" style="height:calc(100% - 45px)" class='ag-theme-alpine'
                         :defaultColDef="defaultColDef"
                         :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                         @columnResized="onColumnResized" @columnMoved="onColumnMoved"></AgGridVuesCopys>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                         @change="changePage" @page-size-change="changeSize"
                         style="justify-content: center;margin-top: 10px;"
                         :page-size="pagination.pageSize" :current="pagination.page"/>
      </a-spin>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts">

import emitter from "@/hooks/useEventBus";
import {onMounted, reactive, ref} from 'vue';
import {usePagination, useTable} from '@/hooks/table';
import {localeText} from '@/api/aggridZw'
import {pagingList} from "@/api/paging";
import {saveOrUpdateGridState as saveOrUpdateGridState01} from '@/hooks/useGridState'

export default {
  name: 'sectionSummary',
  components: {},
  props: {
    searchData: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, ctx) {
    const table = useTable();
    emitter.on("refresh-sectionSummary", () => {
      pagination.page = 1;
      doRefresh();
      // gridOption.value.sizeColumnsToFit();
    });
    const pageLoading = ref<boolean>(false)
    const doRefresh = () => {
      pageLoading.value = false
      updateGridState01()
    };
    const pagination = usePagination(doRefresh);
    //表格方面
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      colState.value = params.columnApi
      //调整表格自适应大小
    };
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150
    };
    let cfsValue: any = [
      {
        headerName: "序号",
        field: "circulatCard",
      },
      {
        headerName: "等待工程",
        field: "circulatCard",
      },
      {
        headerName: "流转卡数",
        field: "circulatCard",
      },
      {
        headerName: "匹数",
        field: "circulatCard",
      },
      {
        headerName: "重量",
        field: "circulatCard",
      }
    ];
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }

    const localeTextData: any = ref(localeText);
    const pagingList1: any = ref(pagingList)
    const {saveGridState: saveGridState01, updateGridState: updateGridState01} = saveOrUpdateGridState01('sectionSummary01', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      pagingList1,
      pageLoading,
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pagination,
      table,
      localeTextData,
      changePage,
      changeSize,
      total,
      cfsValue,
      defaultColDef,
      gridReady,

    }
  },
}
</script>

<style scoped></style>